<template>
  <el-dialog
    v-model="visible"
    title="选择物业公司"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="company-selector">
      <div class="selector-header">
        <el-icon><House /></el-icon>
        <span>请选择要进入的物业公司</span>
      </div>
      
      <div class="company-list">
        <div
          v-for="company in companyList"
          :key="company.id"
          class="company-item"
          :class="{ active: selectedCompanyId === company.id }"
          @click="selectCompany(company)"
        >
          <div class="company-info">
            <div class="company-name">{{ company.name }}</div>
            <div class="company-code">{{ company.code }}</div>
            <div v-if="company.position" class="company-position">
              {{ company.position }}
              <span v-if="company.department"> - {{ company.department }}</span>
            </div>
          </div>
          <el-icon v-if="selectedCompanyId === company.id" class="check-icon">
            <Check />
          </el-icon>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :disabled="!selectedCompanyId">
          确认进入
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { House, Check } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'

interface CompanyInfo {
  id: number
  name: string
  code: string
  position?: string
  department?: string
  employeeNo?: string
  joinDate?: string
  status: number
}

interface Props {
  modelValue: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', companyId: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const userStore = useUserStore()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const companyList = computed(() => userStore.companyList)
const selectedCompanyId = ref<number>(0)

// 监听公司列表变化，如果只有一个公司则自动选中
watch(companyList, (newList) => {
  if (newList.length === 1) {
    selectedCompanyId.value = newList[0].id
  }
}, { immediate: true })

// 选择物业公司
const selectCompany = (company: CompanyInfo) => {
  selectedCompanyId.value = company.id
}

// 确认选择
const handleConfirm = () => {
  if (!selectedCompanyId.value) {
    ElMessage.warning('请选择一个物业公司')
    return
  }
  
  emit('confirm', selectedCompanyId.value)
  visible.value = false
}

// 取消选择
const handleCancel = () => {
  visible.value = false
  // 跳转回首页
  window.location.href = '/'
}
</script>

<style lang="scss" scoped>
.company-selector {
  .selector-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 8px;
    
    .el-icon {
      margin-right: 8px;
      color: #409eff;
      font-size: 18px;
    }
    
    span {
      font-size: 14px;
      color: #606266;
    }
  }
  
  .company-list {
    max-height: 300px;
    overflow-y: auto;
    
    .company-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      margin-bottom: 12px;
      border: 1px solid #e4e7ed;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #409eff;
        background: #f0f9ff;
      }
      
      &.active {
        border-color: #409eff;
        background: #ecf5ff;
      }
      
      .company-info {
        flex: 1;
        
        .company-name {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 4px;
        }
        
        .company-code {
          font-size: 12px;
          color: #909399;
          margin-bottom: 4px;
        }
        
        .company-position {
          font-size: 12px;
          color: #606266;
        }
      }
      
      .check-icon {
        color: #409eff;
        font-size: 18px;
      }
    }
  }
}

.dialog-footer {
  text-align: right;
}
</style>
